<template>
  <view class="container">
    <view class="menu">
      <view :class="type == '1' ? 'menu01' : 'menu02'" @tap="changetype" id="1">
        <text>储值卡</text>
      </view>
      <view :class="type == '2' ? 'menu01' : 'menu02'" @tap="changetype" id="2">
        <text>优惠券</text>
      </view>
    </view>

    <block v-if="type == '1'">
      <view class="page">
        <view class="hy_kq">
          <navigator class="hy_kq_kk" :url="'/packageB/chognzhi/chognzhi?index=0'">
            <view class="hy_kq_1">
              <view class="hy_kq_text">{{ rechargCard.title }}</view>
              <view class="hy_kq_tpq">
               ￥{{rechargCard.money}}
              </view>
            </view>
            <view class="hy_kq_kx">充值卡</view>
            <view class="hy_kq_di">
              <view>使用规则：同比例扣除</view>
              <view>有效期限：不限期</view>
            </view>
          </navigator>
        </view>
      </view>
    </block>

    <block v-if="type == '2'">
      <view class="page">
        <view v-if="youhuiquan.length>0" class="hy_kq">
          <!-- 卡  for -->
          <navigator class="hy_kq_kk" v-for="(item,index) in youhuiquan" :key="index" style="margin-bottom: 10px"  :url="'/packageB/chognzhi/chognzhi?index='+index">
            <view class="hy_kq_1">
              <view class="hy_kq_text">{{item.name}}</view>
              <view class="hy_kq_tpq">
                <view>优惠金额{{ item.price }}元</view>

                <view></view>
              </view>
            </view>
            <view class="hy_kq_kx"></view>
            <view class="hy_kq_di">
              <view>{{item.type==1?'美团':'抖音'}}</view>
              <view>有效期限：{{item.start_time}} - {{item.end_time}}</view>
            </view>
          </navigator>
        </view>
        <view v-else>
          <view class="hezi_img">
            <view>
              <image class="kong" src="/static/pages/img/空空的.png"></image>
            </view>
          </view>

          <view class="hezi_text">
            <view>暂无代金券</view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
// pages/wodekaquan/wodekaquan.js
import {couponList, userrechargCard} from "@/common/api";

export default {
  data() {
    return {
      type: 1,
      cz: '0',
      zs: '0',
      youhuiquan: [],
      rechargCard: {}
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    userrechargCard(res => {
      this.setData({
        rechargCard: res.data.data
      });
      console.log('userrechargCard', res)
    })
    couponList(res => {
      this.setData({
        youhuiquan: res.data.data
      });
      console.log('couponList', res)
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    changetype: function (option) {
      var that = this;
      var type = option.currentTarget.id;
      that.setData({
        type: type
      });
      uni.showLoading({
        title: '加载中...'
      });
      uni.hideLoading();
    }
  }
};
</script>
<style>
.menu {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  top: 0;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.menu01 {
  width: 20%;
  line-height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #ff4800;
  border-bottom: 2px solid #ff4800;
}

.menu02 {
  width: 20%;
  line-height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #666666;
}

.page {
  background-color: rgb(247, 247, 247);
  height: 100vh;
  padding: 60rpx 40rpx 60rpx 40rpx;
}

.hy_kq_kk {
  background-color: rgb(194, 162, 104);
  height: 200rpx;
  border-radius: 12rpx; /* 设置边框圆角 */
  padding: 30rpx 30rpx 30rpx 30rpx;
  color: rgb(121, 68, 19);
}

.hy_kq_1 {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.hy_kq_text {
  font-weight: bold; /* 设置字体加粗 */
  font-size: 20px; /* 将字体大小设为14px */
}

.hy_kq_tp {
  width: 30rpx;
  height: 30rpx;
}

.hy_kq_tpq {
  font-size: 25rpx;
  //border-radius: 50%;
  color: rgb(121, 68, 19);
  //background-color: rgba(212, 192, 153, 0.5);
}

.hy_kq_kx {
  margin-top: 20rpx;
}

.hy_kq_di {
  margin-top: 40rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  font-size: 11px; /* 将字体大小设为14px */
}

.hezi_img {
  display: flex;
  justify-content: space-around;
}

.kong {
  width: 500rpx;
  height: 400rpx;
}

.hezi_text {
  color: rgb(128, 127, 127);
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}
</style>
